<template>
    <div class="TitList">
        <!--头-->
        <Top>
            <i class="el-icon-arrow-left back" slot="leftPart" @click="goback()"></i>
            <p class="title" slot="midPart">{{$route.query.title}}</p>
        </Top>
        <!-----------中------------->
        <!--有数据显示-->
        <div class="mid" v-if="lessonList.length>0" v-loading="loading" >
            <cube-scroll
                         ref="scroll"
                         :data="lessonList"
                         :options="scrollOptions"
                         @pulling-up="onPullingUp">
                <!--产品列表-->
                <ul class="lists">
                    <router-link tag="li" :to="{path:'detail',query:{lession_id:item.lession_id,member_id:getMemberId(),prev:true}}" class="clearfix animated slideInRight" :style="{animationDelay:delay(index)}"  v-for="(item,index) in lessonList" :key="index">
                        <!-- <img :src="item.lession_img" alt=""> -->
                        <!-- <div class="infos">
                            <h4 class="tit"><span class="end" v-if="item.is_complete===1">完结</span>{{item.lession_name}}</h4>
                            <p class="admin"><span>{{item.teacher_name}}</span><span>{{item.teacher_level}}</span><span><i class="el-icon-star-off"></i>{{item.lession_level}}</span></p>
                            <div class="other">
                                <span><i class="el-icon-view"></i>&#8197;{{item.lession_view}}</span>
                                <span><i class="el-icon-time"></i>&#8197;{{item.lession_num_hour}}课时</span>
                                <span v-if="item.lession_price>0"><strong>{{item.lession_price}}</strong>花瓣</span>
                                <span v-else><strong>免费</strong></span>
                            </div>
                            <p class="starttime" v-if="item.lession_time && item.is_more===1">开课时间：{{item.lession_time}}&emsp;{{item.lession_update_time}}</p>
                        </div> -->
                        <base-list :item="item" style="margin-top:.28rem;" />
                    </router-link>
                </ul>
            </cube-scroll>
        </div>
        <!--无数据时显示-->
        <div class="mid" v-else>
            <div class="nodata animated fadeIn">
                <img src="../assets/huawa-off.png" alt="" />
                <p>暂无数据..</p>
            </div>
        </div>
    </div>
</template>

<script>
    //导入相关组件
    import Top from '@/components/smallCom/Top'
    import BaseList from '@/base/baseList.vue'
    export default {
        name: 'TitList',
        components: {
            Top,//顶部信息组件
            BaseList
        },
        data () {
            return {
                loading:true, // 加载动画
                lessonList:[], // 课程列表

                /*上拉加载*/
                scrollOptions: {
                    pullUpLoad: {
                        threshold: 20,
                        txt: {
                            more: '加载更多..',
                            noMore: '没有更多了..'
                        },
                        stopTime:1000
                    }
                },

                /*分页*/
                currentPage:2,//当前页
                prePage:6,//每页显示几条数据
            }
        },
        created(){
            this.loading = true;
            let data = this.routeData();
            console.log('data',data)
            data.member_id = this.getMemberId();
            this.Posthttp(this.$route.query.url,data,(res)=>{
                this.loading = false;
                this.lessonList = JSON.parse(res.bodyText).data.lession;
            });
        },
        methods:{
            //加载更多
            onPullingUp(){
                //传给后台的值
                let data = this.routeData();
                data.member_id = this.getMemberId();
                data.page = this.currentPage;
                this.Posthttp(this.$route.query.url,data,(res)=>{
                    let Dlength = JSON.parse(res.bodyText).data.lession.length;
                    if(Dlength>0){
                        this.currentPage++
                        this.lessonList = this.lessonList.concat(JSON.parse(res.bodyText).data.lession)
                    }else{
                        this.$refs.scroll.forceUpdate()
                    }
                })
            },
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
    .TitList {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 0 0 1.5rem;
        /*公共头部 异处*/
        .TopTab{
            border: 1px solid #fff;
            display: inline-block;
            border-radius: .06rem;
            overflow: hidden;
            position: absolute;
            left: calc(50% - 1.54rem);
            top: calc(50% - .3rem);
            li{
                width: 1.54rem;
                height: .6rem;
                line-height: .6rem;
                text-align: center;
                float: left;
                color: #fff;
                &.on{
                    background-color: #fff;
                    color: #e7470e;
                }
            }
        }
        /*中*/
        .mid{
            width: 100%;
            position: fixed;
            top: .8rem;
            bottom: 0;
            left: 0;
            overflow-y: auto;
            padding: 0 .2rem;
            background-color: #fff;
            /*产品列表*/
            .lists{
                overflow-x: hidden;
                li{
                    width: 100%;
                    // padding:.34rem 0;
                    // border-bottom: 1px solid #e4e4e4;
                    animation-duration:.6s;
                    &:last-child{
                        border-bottom: 0;
                    }
                    /*左侧图片*/
                    img{
                        width: 1.88rem;
                        height: 1.35rem;
                        float: left;
                    }
                    /*右侧信息*/
                    .infos{
                        margin-left: 1.88rem;
                        padding-left: .2rem;
                        position: relative;
                        /*标题*/
                        .tit{
                            text-overflow: ellipsis;
                            overflow: hidden;
                            white-space: nowrap;
                            color: #333;
                            height: .34rem;
                            line-height: .34rem;
                            margin-bottom: .24rem;
                            span.end{
                                display: inline-block;
                                height: 100%;
                                font-size: .28rem;
                                padding: 0 .12rem;
                                border-radius: .06rem;
                                margin-right: .1rem;
                                color: #fff;
                                background-color: #e7470e;
                            }
                        }
                        /*老师*/
                        .admin{
                            color: #777;
                            margin-bottom: .28rem;
                            font-size: .22rem;
                            display: flex;
                            justify-content: space-between;
                            span{
                                width: 32%;
                                text-align: justify;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                            }
                        }
                        /*其他*/
                        .other{
                            width: 100%;
                            display: flex;
                            justify-content: space-between;
                            align-items: baseline;
                            font-size: .22rem;
                            strong{
                                font-size: .28rem;
                                color: #e7470e;
                                font-weight: 600;
                                margin-right: .02rem;
                            }
                        }
                        /*开课时间*/
                        .starttime{
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            margin-top: .2rem;
                            font-size: .2rem;
                        }
                    }
                }
            }
        }
    }
</style>
